<template>
    <div v-loading="loading">
        <el-dialog :visible.sync="visible" title="提现拒绝原因" width="800px">
            <el-form :model="form">
                <el-form-item label="拒绝原因">
                    <el-input placeholder="请输入提现拒绝原因" style="width: 500px" v-model="form.reason"  type="textarea"></el-input>
                </el-form-item>
            </el-form>
            <div class="dialog-footer" slot="footer">
                <el-button @click="closeBox">取 消</el-button>
                <el-button @click="submit" :loading="submitComplete" type="primary">确  定</el-button>
            </div>
        </el-dialog>
        <el-card body-style="padding:10px" class="box-card">
            <el-input clearable placeholder="请输入姓名" size="small" style="width: 200px;" v-model="query.real_name"></el-input>
                    <el-select placeholder="请选择银行" v-model="query.bank_name"  @change="selectFun">
                        <el-option :key="key" :label="val" :value="val" v-for="(val, key) in typeList"></el-option>
                    </el-select>
        
            <el-input clearable placeholder="请输入银行卡号" size="small" style="width: 200px;" v-model="query.bank_card"></el-input>
            <el-input clearable placeholder="请输入开户行地址" size="small" style="width: 200px;"
                v-model="query.bank_address"></el-input>
            <!-- 根据type选择 -->
            <el-select v-model="query.status" placeholder="请选择提现状态">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
            </el-select>
            <el-button @click="page=1;init()" size="small" type="primary" style="margin-left: 30px;">搜索</el-button>
            <el-button @click="page=1;init()" icon="el-icon-refresh-right" size="small" type="primary">刷新</el-button>
        </el-card>
        <el-card body-style="padding:10px" class="box-card mt-10">
            <el-table :data="data" max-height="640px" size="small" style="width: 100%">
                <el-table-column label="ID" prop="id" width = "40px"></el-table-column>
                <el-table-column label="用户ID" prop="user_id" width = "150px">
                    <template slot-scope="scope">
                        <UserInfo :user_id="scope.row.user_id" :userInfos="scope.row.user_info" v-if="scope.row.user_id"></UserInfo>
                    </template>
                </el-table-column>
                <el-table-column label="银行卡编码" prop="bank_code"></el-table-column>
                <el-table-column label="银行名称" prop="bank_name"></el-table-column>
                <el-table-column label="真实姓名" prop="real_name"  ></el-table-column>
                <el-table-column label="银行卡号" prop="bank_card"></el-table-column>
                <!-- <el-table-column label="开户行地址" prop="bank_address"></el-table-column> -->
                <el-table-column label="提现金额" prop="money" width = "100px"></el-table-column>
                <!-- <el-table-column label="提现使用金币" prop="balance"></el-table-column> -->

                <!-- <el-table-column label="手续费" prop="fee"></el-table-column> -->

                <el-table-column label="提现状态" prop="status" width = "100px">
                    <template slot-scope="scope">
                        <el-tag v-if="scope.row.status == 0" type="warning">待审核</el-tag>
                        <el-tag v-else-if="scope.row.status == 1" type="success">已通过</el-tag>
                        <el-tag v-else-if="scope.row.status == 2" type="danger">已拒绝</el-tag>

                    </template>
                </el-table-column>
                <el-table-column label="提现时间" sortable prop="created_at"></el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <div v-show="scope.row.status == 0">
                            <el-popconfirm @confirm="passFun(scope.row.id,1)" title="确定要通过吗？">
                                <el-button size="mini" slot="reference" type="primary" style="padding: 10px"  v-permission="['ADMIN','WITHDRAW_PASS']">通过</el-button>
                            </el-popconfirm>

                            <el-popconfirm @confirm="passFun(scope.row.id,2)" title="确定要拒绝吗？">
                                <el-button size="mini" slot="reference" type="danger" style="padding: 10px"   v-permission="['ADMIN','WITHDRAW_REJECT']">拒绝</el-button>
                            </el-popconfirm>
                                <el-button size="mini" slot="reference" type="success" style="padding: 10px"  @click="toDetails(scope.row.id)"   v-permission="['ADMIN','WITHDRAW_DETAILS']">详情</el-button>
                        </div>
                        <div v-show="scope.row.status != 0">
                            <el-button size="mini" slot="reference" type="success" style="padding: 10px" @click="toDetails(scope.row.id)"  v-permission="['ADMIN','WITHDRAW_DETAILS']">详情</el-button>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>
        <!-- 分页组件 -->
        <el-card body-style="padding:10px" class="box-card mt-10">
            <el-pagination :current-page="page" :total="total" @current-change="pageChange" @size-change="sizeChange"
                layout="total, prev, pager, next, sizes" style="margin-top: 8px;" />
        </el-card>
    </div>
</template>
      
<script>
import treeSelect from '@/components/SelectTree/index'
import list from "@/api/bank.json"
import medium from '@/components/medium/index'
import initData from '@/mixins/index'
export default {
    name:"withdraw-list",
    mixins: [initData],
    components: {
        treeSelect,
        medium
    },
    data() {
        return {
            submitComplete:false,
            query: {
                status:null,
                real_name:'',
                bank_name:'',
                bank_card:'',
                bank_address:''
            },
            value: '',
            form:{
                reason:'',
                refuseId:'',
            },
            options: [
                {
                    value: 0,
                    label: '待审核'
                }, {
                    value: 1,
                    label: '已通过'
                }, {
                    value: 2,
                    label: '已拒绝'
                }
            ],
            typeList: list,
            visible: false,
            loading: false,
            images: [],
           
        }
    },
    mounted() {
        //this.getworksList()
        this.beforeInit()


    },
    methods: {
        beforeInit() {
            this.url = "/user-withdraw/index"
            this.init() //重新请求数据
            console.log("data", this.data)
        },
        selectFun(val) {
            this.query.bank_name = val
        },

        toDetails(id) {
            this.$router.push({ path: "/withdraw-details?id=" + id}); 
        },

        passFun(id,status){

            if(status == 2){
                this.visible = true
                this.form.refuseId = id;
                return
            }
            let that = this
            this.$request.put('/user-withdraw/update/'+ id, { status: status}).then((res) => {
                this.$message.success('操作成功')
                this.init() //重新请求数据
            })
        },

        submit(){
            if(this.submitComplete) return
            this.submitComplete = true
            if(!this.form.reason){
                this.$message.warning("请输入提现拒绝原因！");
                this.submitComplete = false
                return
            }

            let that = this
            this.$request.put('/user-withdraw/update/'+ that.form.refuseId, { status: 2,reason:that.form.reason}).then((res) => {
                this.$message.success('操作成功')
                this.submitComplete = false
                this.init() //重新请求数据
                 this.closeBox()
            }).catch((error)=>{
                this.submitComplete = false
                });
        },



        closeBox() {
            this.visible = false
            this.form.reason =  ''
            this.form.refuseId =  ''
        },



    },
}
</script>
      
<style lang="scss" scoped>
.butBox {
    background-color: rgb(219, 219, 219);
    border: none;
    color: #555;
}

.flex {
    display: flex;
}
</style>